<script lang="ts" setup>
  import { ref,watch } from "vue"
  import gmDrawer from '@/components/Drawer/index.vue'
  import { getServiceById } from '@/api/service'
  import { type FormInstance, type FormRules, ElMessage } from "element-plus"
  import BasicEditor from '@/components/BasicEditor/index.vue';

  interface Props {
    id?: number | string
  }

  const props = withDefaults(defineProps<Props>(), {
    id: '',
  })
  const form = ref<any>({
    productIds:[]
  })
  const formRef = ref<FormInstance>()
  const dialogRef = ref<InstanceType<typeof gmDrawer>>()
  const emit = defineEmits(['cancel','success'])
  const dialogVisible = ref<boolean>(false)


  const cancel = ()=>{
    emit('cancel')
  }

  //关闭操作框
  const closeHandle = () => {
    dialogVisible.value = false
  }

  //操作完成
  const successHandle = () => {
    dialogVisible.value = false
    getData()
  }

  //更新操作按钮
  const editPoint = (row: any) => {
    dialogVisible.value = true
  }

  const getData = () => {
    getServiceById({id:props.serviceId}).then((res: any)=>{
      form.value = res
    })
  }

  if(props.serviceId) getData()

</script>

<template>
  <gmDrawer
      title="服务详情"
      :showFooter="false"
      ref="dialogRef"
      size="1000px"
      @cancel="cancel"
    >
      <div class="fieldTable">
        <el-form ref="formRef" :model="form" label-width="100px" label-position="left">
          <el-row :gutter="20" class="form-card-main">
            <el-col :span="12">
              <el-form-item label="标题" prop="title">
                {{form.title}}
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="类型名称" prop="typeName">
                {{form.typeName}}
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="作者" prop="author">
                {{form.author}}
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="图片" prop="pic">
                {{form.pic}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <!-- 富文本编辑器 -->
              <el-form-item label="内容" prop="serviceContent">
                <BasicEditor v-model="form.serviceContent"></BasicEditor>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="创建时间" prop="createTime">
                {{form.createTime}}
              </el-form-item>
            </el-col>


          </el-row>
        </el-form>
      </div>

      <handle
        v-if="dialogVisible"
        :id="form.shopStaffId"
        @success="successHandle"
        @cancel="closeHandle"
      />
    </gmDrawer>
</template>


<style lang="scss" scoped>

</style>
